<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="640px"
  @open="beforeOpen"
  :before-close="handleClose"
  :close-on-click-modal="false"
  custom-class="material-modal"
)
  .modal-title(slot="title") {{detail.title}}
  .modal-body
    .supplier-name {{detail.supplierName}}：
    .message-content {{detail.content}}
    .message-orderno(v-if="detail.subType == 2") {{detail.orderNo}}
    .dialog-table(v-if="detail.subType == 1 || detail.subType == 2")
      el-table(
        :data="detail.materialList"
        style="width: 100%"
        border
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
        :span-method="objectSpanMethod"
      )
        el-table-column(label="样品名称" width="200")
          template(slot-scope="scope")
            .table-item
              .table-item-img(:style="{ 'background-image': `url(${scope.row.img})` }")
              .table-item-name {{scope.row.materialName}}
        el-table-column(label="数量" prop="num" width="60")
        el-table-column(label="规格属性" width="150")
          template(slot-scope="scope")
            .table-spce
              .spec-item(v-for="item in scope.row.spec") {{item.specName}}：{{item.specValue}}
        el-table-column(label="订单备注" prop="remark")
    .dialog-table(v-if="detail.subType == 3")
      el-table(
        :data="detail.materialList"
        style="width: 100%"
        border
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
      )
        el-table-column(label="材料名称" width="250")
          template(slot-scope="scope")
            .table-item-material
              .table-item-img(:style="{ 'background-image': `url(${scope.row.img})` }")
              .table-item-name {{scope.row.name}}
        el-table-column(label="品牌" prop="brand")
  .modal-footer(slot="footer")
    el-button(type="primary" @click="handleClose") 我知道了
</template>

<script>
import { getNoticeDetail } from 'api'
export default {
  name: 'messageDialog',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      detail: {
        title: '',
        supplierName: '',
        subType: '',
        content: ''
      }
    }
  },
  methods: {
    async beforeOpen () {
      try {
        const { ResultSet } = await this.$axios.post(getNoticeDetail, { content: { messageId: this.item.messageId } })
        this.detail = ResultSet.userData.messageDetail
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) { // 合并单元格
      if (columnIndex === 4) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handleClose () {
      this.$emit('close')
    }
  }
} 
</script>

<style type="text/css" lang="scss">
  .material-modal {
    .el-dialog__header {
      background: #F3F3F3;
    }
  }
</style>

<style lang="scss" scoped>
.modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.supplier-name {
  font-size: 14px;
  font-weight: bold;
  color: #363636;
}
.message-content {
  margin-top: 24px;
  font-size: 14px;
  color: #363636;
}
.dialog-table {
  margin-top: 24px;
}
.table-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-item-img {
  width: 60px;
  min-width: 60px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
}
.table-item-name {
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.table-item-material {
  display: flex;
  align-items: center;
}
</style>
